<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas
      id="myCanvas"
      style="border: 1px solid #d3d3d3"
      width="600"
      height="600"
    ></canvas>
    <script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      function drawLine(x1, y1, x2, y2, color, width) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.strokeStyle = "color";
        ctx.lineWidth = width;
        ctx.closePath();
        ctx.stroke();
      }

      drawLine(50, 150, 100, 150, red, 5);
    </script>
  </body>
</html>
